import {BottomSheetModal} from '@gorhom/bottom-sheet';
import {Pressable, StyleSheet, View} from 'react-native';
import {Icon, Text, useAppTheme} from 'tsun-smart-ui';
import {useTranslation} from 'react-i18next';
import {useSafeAreaInsets} from 'react-native-safe-area-context';
import ModalBackdrop from '../CustomBottomSheetBackdrop';

export const ModelAction = ({
  ref,
  children,
  height,
  title,
}: {
  ref: React.RefObject<BottomSheetModal | null>;
  children: React.ReactNode;
  height: number;
  title?: string;
}) => {
  const theme = useAppTheme();
  return (
    <BottomSheetModal
      snapPoints={[height]}
      enableDynamicSizing={false}
      enablePanDownToClose={false}
      handleComponent={null}
      backdropComponent={ModalBackdrop}
      keyboardBlurBehavior="restore"
      backgroundStyle={{
        backgroundColor: theme.colors?.neutral?.white,
      }}
      enableContentPanningGesture={false}
      ref={ref}>
      {title && (
        <View className="flex-center my-4 mx-4 relative">
          <Text variant="cardTitle">{title}</Text>
          <Icon
            onPress={() => ref?.current?.close()}
            name="close-nocircle"
            color={theme.colors?.neutral?.secondaryTitle}
            size={12}
            className="right-0 p-2 absolute"></Icon>
        </View>
      )}
      {children}
    </BottomSheetModal>
  );
};
const ActionSheets = ({
  options,
  ref,
  itemHeight = 64,
  showCancel = true,
}: {
  options: {
    title: string;
    onPress: () => void;
  }[];
  ref: React.RefObject<BottomSheetModal | null>;
  itemHeight?: number;
  showCancel?: boolean;
}) => {
  const {t} = useTranslation();
  const {bottom} = useSafeAreaInsets();
  const height =
    (options.length + (showCancel ? 1 : 0)) * itemHeight +
    (showCancel ? 8 : 0) +
    bottom;
  const theme = useAppTheme();
  return (
    <ModelAction height={height} ref={ref}>
      <View className="flex-1">
        {options.map((option, index) => (
          <Pressable
            key={option.title}
            onPress={() => {
              option.onPress();
              ref?.current?.close();
            }}
            style={{
              height: itemHeight,
              borderBottomWidth: StyleSheet.hairlineWidth ?? 1,
              borderBottomColor:
                index === options.length - 1
                  ? 'transparent'
                  : theme.colors?.background?.disabled,
            }}
            className="flex-center">
            <Text>{option.title}</Text>
          </Pressable>
        ))}
        {showCancel && (
          <>
            <View
              className="h-2"
              style={{
                backgroundColor: theme.colors?.background?.disabled,
              }}
            />
            <Pressable
              style={{
                height: itemHeight,
              }}
              onPress={() => ref?.current?.close()}
              className="flex-center">
              <Text
                style={{
                  color: theme.colors?.neutral?.primary,
                }}>
                {t('user.logOutCancel')}
              </Text>
            </Pressable>
          </>
        )}
      </View>
    </ModelAction>
  );
};

export default ActionSheets;
